<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>裁剪测试</title>
    <script type="text/javascript" src="../doc/asset/js/esl/esl.js"></script>
</head>
<body>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require([
        "zrender",
        'zrender/shape/Image',
        'zrender/Group',
        'zrender/shape/Circle',
        'zrender/shape/Rectangle'
    ], function(zrender, ImageShape, Group, CircleShape, RectShape){

        // 初始化zrender
        var zr = zrender.init( document.getElementById("Main") );

        var g1 = new Group();
        var g2 = new Group();
        g1.addChild(g2);
        zr.addGroup(g1);

        var clipShape = new CircleShape({
            style: {
                r: 200,
                x: 0,
                y: 0
            },
            position: [200, 200]
        });

        g2.clipShape = clipShape;

        var clipShape = new RectShape({
            style: {
                width: 500,
                height: 100,
                x: -250,
                y: -20
            },
            position: [200, 200]
        });
        g1.clipShape = clipShape;

        for( var i = 0; i < 20; i ++){
            for( var j = 0; j < 20; j++){
                var image = new ImageShape({
                    position : [i * 50, j * 50],
                    scale : [1, 1],
                    style : {
                        x : 0,
                        y : 0,
                        image : "test.jpeg",
                        width : 50,
                        height : 50
                    },
                    draggable : true
                });
                g2.addChild( image );
            }
        }

        zr.render();

    })
    </script>
    <div id="Main" style="width:1000px;height:600px;"></div>
</body>
</html>